/**
 * @author phi
 */

var $id = function(id) { return document.getElementById(id); }
var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; }
var $classes = function(c)  { return document.getElementsByClassName(c); }

/**
 * 音データへのパス
 */
var SOUND_PATH = "./sound/";

/**
 * サポートされているファイル形式を取得
 */
var AUDIO_EXT = (function(){
    var audio = new Audio();
    var ext = "";
    if      (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; }
    else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; }
    else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; }
    
    return ext;
})();

window.onload = function()
{
    // キーボードエレメントを取得
    var keyboards = $classes("keyboard");
    // 全ての要素にクリック時のイベントを登録
    for (var i=0; i<keyboards.length; ++i) {
        // クリックイベントを登録
        keyboards[i].addEventListener("click", function(){
            // 音を鳴らす
            play(this);
        }, false);
        
        // アニメーション終了時イベントを登録
        keyboards[i].addEventListener("webkitAnimationEnd", function(){
            // アニメーションが終了したら ステートを "paused" にする.
            // こうすることで "running" にした際にまた再生できることを発見した.
            this.style.webkitAnimationPlayState = "paused";
        }, false);
    }
    
    // ドレミ(sol-fa system)
    var solmization_list = [
        'ド', 'レ', 'ミ', 'ファ', 'ソ', 'ラ', 'シ'
    ];
    // 音階
    var pitch_notation_list = [
        'C3', 'D3', 'E3', 'F3', 'G3', 'A4', 'B4', 'C4'
    ];
    // キー対応
    var key_list = [
        'A', 'S', 'D', 'F', 'J', 'K', 'L', ';',
        'W', 'E', 'None', 'U', 'I', 'O'
    ];
    var key_map = {};
    for (var i=0; i<key_list.length; ++i) {
        key_map[ key_list[i] ]              = keyboards[i];
        key_map[ solmization_list[i] ]      = keyboards[i];
        key_map[ pitch_notation_list[i] ]   = keyboards[i];
    }
    
    // キー入力時イベントを登録
    document.onkeypress = function(e)
    {
        // 入力コードを文字に変換
        var key = String.fromCharCode(e.charCode);
        // 大文字化
        key = key.toUpperCase();
        // 対応するエレメントが存在したときに, 再生する
        if ( key_map[key] ) { play( key_map[key] ); }
    }
    
    // 
    var playMusic = function(music) {
        // 楽譜を大文字化
        music = music.toUpperCase();
        // 楽譜をコンマ区切りでリスト化
        music = music.split(',');
        
        var index = 0;
        // ♪数を取得
        var len = music.length;
        
        // 一定時間ごとに音を鳴らす
        setTimeout(function(){
            // 音データと間隔を分割
            var key = music[index].split(' ');
            // 間隔のデフォルト値は0.5秒
            if (key.length < 2) { key[1] = 250; }
            // 再生
            if (key_map[ key[0] ]) { play( key_map[ key[0] ] ); }
            
            // インデックスを進めてまだ残りの♪があったあった場合, 再び再生関数を登録する
            ++index;
            if (index < len) {
                setTimeout(arguments.callee, key[1]);
            }
        }, 0);
    };
    
    // play button
    $class("play-button").addEventListener("click", function(){
        var music = $class("music-area").value;
        music = music.replace(/\n/g, '');
        playMusic(music);
    }, false);
}

/*
 * 音を鳴らす
 */
function play(element)
{
    // 音を鳴らす
    var audio = new Audio(SOUND_PATH + element.getAttribute("name") + '.' + AUDIO_EXT);
    audio.play();
    // アニメーション
    element.style.webkitAnimationPlayState = "running";
}



